<template>
  <!-- 印章类型 -->
  <view>
    <view v-if="!!dataList && dataList.length > 0">
      <uni-card :is-shadow="false" v-for="(item,index) in dataList" :key="index">
        <p class="grid-integral">印章类型：{{ item.name }}</p>
        <p class="grid-integral">类型说明：{{ item.remark }}</p>
        <p class="grid-integral">初始类型：
          <template v-for="(dictItem, index) in dicts.ec_is_system">
            <template v-if="item.isSystem == dictItem.value">
              <uni-tag :text="dictItem.text" :type="dictItem.type"/>
            </template>
          </template>
        </p>
        <p class="grid-integral">创建时间：
          <span v-if="item.createTime != null">{{ item.createTime }}</span>
          <span v-else>--</span>
        </p>
        <view slot="actions" class="card-actions" v-if="item.isSystem == 0">
          <view class="card-actions-item" @click="handleEdit(item)">
            <uni-icons type="upload" size="18" color="#00a660"></uni-icons>
            <text class="card-actions-item-text themeColor">修改</text>
          </view>
          <view class="card-actions-item" @click="handleDelete(item,index)">
            <uni-icons type="trash" size="18" color="#f78989"></uni-icons>
            <text class="card-actions-item-text errorColor">删除</text>
          </view>
        </view>
      </uni-card>
      <!-- 加载更多 -->
      <uni-load-more color="#00a660" :status="loadStatus"/>
    </view>
    <!-- 暂无数据 -->
    <luanqingEmpty :show="true" text="没有更多数据啦" v-else/>
    <!-- 新增/修改- -->
    <modify-seal-type ref="modifySealType" @success="handleQuery"/>
  </view>
</template>

<script>
import {getDictsByNameForUni} from "@/utils/dicts";
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {delSealType, listSealType} from "@/api/ec/console/seal/sealType";
import modifySealType from "./modifySealType";

export default {
  name: 'sealType',
  components: {luanqingEmpty, modifySealType},
  props: {
    // 查询参数
    name: {
      type: String,
    },
  },
  data() {
    return {
      // 数据字典
      dicts: {
        ec_is_system: [],
      },
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
      },
    }
  },
  created() {
    this.getDicts();
  },
  methods: {
    /**加载数据字典*/
    getDicts() {
      this.dicts.ec_is_system = getDictsByNameForUni("ec_is_system");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      this.queryParams.name = this.name;
      listSealType(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 上拉刷新回调 */
    loadMore() {
      if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
        this.loadStatus = 'loading';
        // 延迟500毫秒显示loading效果
        setTimeout(() => {
          // 执行查询的方法
          this.getList(false);
        }, 500)
      } else {
        // 停止加载
        this.loadStatus = 'noMore'
      }
    },
    /** 新增 */
    handleAdd() {
      this.$refs.modifySealType.toOpenDialog();
    },
    /** 修改 */
    handleEdit(item) {
      this.$refs.modifySealType.toOpenDialog(item);
    },
    /** 删除 */
    handleDelete(item, index) {
      let that = this;
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '您确认要删除印章类型吗？印章类型删除后，将无法恢复。',
        success: function (res) {
          if (res.confirm) {
            delSealType(item.id).then((response) => {
              that.dataList.splice(index, 1)
              uni.showToast({title: '删除成功'});
            });
          }
        },
      })
    }
  }
}
</script>
